<template>
    <h1>用户列表</h1>

    <table class="table table-bordered" border="2">
        <thead>
            <tr>
                <th>用户编号</th>
                <th>登录名称</th>
                <th>密码</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in Show" >
                <td>{{ item.U_Id }}</td>
                <td>{{ item.U_Name }}</td>
                <td> ****** </td>
                <td>{{ item.U_State == true ? '未登录' : '已登录'}}</td>
                <td>
                    <a href="#" @click="DelData(item.U_Id)" >删除</a>&nbsp;&nbsp;
                    <a href="#" @click="jump(item.U_Id)">用户理财明细</a>
                </td>
            </tr>
        </tbody>

    </table>

    共有{{ page.totalCount }}条记录，每页显示{{ page.PageSize }}条，共{{ page.PageIndex }}/{{ page.PageCount }}页

</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();

const Show = ref([{
    U_Id:'',
    U_Name:'',
    U_Pwd:'',
    U_State:'',
}])

const page = ref({
    PageSize:2,//每页显示条数
    PageIndex:1,//当前页
    totalCount:0,//总条数
    PageCount:0//总页数
})

onMounted (()=>{
    ShowUser();
})

const ShowUser = () =>{
    axios({
        method:'get',
        url:'http://localhost:62821/api/User/ShowUser',
        params:{
            PageSize:page.value.PageSize,
            PageIndex:page.value.PageIndex
        }
    })
    .then(function(res){
        console.log(res.data);
        Show.value = res.data.list;
        page.value.totalCount = res.data.totalCount;
        page.value.PageCount = res.data.PageCount;
    })
    .catch(function(error){
        console.log(error);
    })
}

const DelData = (Id:any) =>{
   //alert(Id);

   if(confirm('确定要删除吗？')){
    axios({
        method:'get',
        url:'http://localhost:62821/api/User/DelData',
        params:{
            Id:Id
        }
   })
   .then(function(res){
       console.log(res);
       if(res.data>0){
        alert('删除成功');
        ShowUser();
       }
       else{
        alert('未删除');
        ShowUser();
    }   
   })
   .catch(function(error){
       console.log(error);
   })
   }

   
}

const jump = (Id:any) =>{
    //alert(Id);
    router.push('/UserFinanInfo')
}



</script>
